<template>
  <div class="login">
    <div class="login-wrapper">
      <div class="title">M<a>O</a>X</div>
      <div class="description">后台管理系统</div>
      <n-input type="text" v-model:value="accountName" placeholder="账号 / 手机号" />
      <div style="height: 20px"></div>
      <n-input type="password" v-model:value="password" placeholder="密码" />
      <div style="height: 20px"></div>
      <n-button @click="login" type="primary" style="width: 80px">登录</n-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getCurrentInstance, ref } from "vue"
import { useRouter } from "vue-router"
import { NInput, NButton, useMessage } from "naive-ui"

const router = useRouter()
const message = useMessage()
const api = getCurrentInstance()?.appContext.config.globalProperties.$api

const accountName = ref()
const password = ref()

const login = async () => {
  let data = { accountName: accountName.value, password: password.value }

  let response: any = await api.login(data)
  if (response.data.successful === 1) {
    localStorage.setItem("IS_LOGIN", "true")
    router.replace({ path: "/" })
    message.success("登录成功！")
  } else {
    message.error("登录失败！")
  }
}
</script>

<style lang="less" scoped>
.login {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  background-color: #222;

  .login-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;

    .title {
      font-size: 3rem;
      color: #fff;
      font-weight: bold;
      font-family: "Courier New";
      letter-spacing: 6px;
      user-select: none;

      a {
        color: #f44;
      }
    }

    .description {
      font-size: 0.9rem;
      color: #aaa;
      height: 2rem;
      line-height: 2rem;
      font-family: "Courier New", Courier, monospace;
    }
  }
}
</style>
